<!--
 * @Author: C.
 * @Date: 2021-08-31 13:11:51
 * @LastEditTime: 2021-09-03 15:25:16
 * @Description: file content
-->
<template>
  <Vue3DraggableResizable
    class="drag-field"
    :x="cdata.style.x"
    :y="cdata.style.y"
    :w="cdata.style.w"
    :h="cdata.style.h"
    @dragging="setPos"
    @resizing="setSize"
    @activated="setActivated"
  >
    <div class="content-wrapper" :style="fieldStyle">
      <QrCode :value="qrCodeUrl" tag="img" />
    </div>
  </Vue3DraggableResizable>
</template>
<script lang="ts">
  import { computed, defineComponent, HTMLAttributes } from 'vue';
  import Vue3DraggableResizable from 'vue3-draggable-resizable';
  import { QrCode } from '/@/components/Qrcode/index';
  import { usePrintStyle } from '../../../../../hooks/usePrintStyle';
  import { FieldInfo } from '../../../../../types';
  export default defineComponent({
    components: { Vue3DraggableResizable, QrCode },
    props: {
      cdata: {
        type: Object,
        default: () => {},
      },
    },
    setup(props) {
      let [setPos, setSize, setStyle, setActivated] = usePrintStyle(props.cdata as FieldInfo);
      let fieldStyle = computed(() => {
        return setStyle(props.cdata.style);
      });
      const qrCodeUrl = 'https://www.vvbin.cn';
      return {
        setPos,
        setSize,
        fieldStyle: fieldStyle as HTMLAttributes,
        setActivated,
        qrCodeUrl,
      };
    },
  });
</script>
<style lang="less" scoped>
  @import '../../../../../styles/mixin.less';

  .drag-field {
    z-index: 9;

    .content-wrapper {
      .flexBox();

      background-color: rgb(246, 209, 216);
    }
  }
</style>
